<template>
  <div class="hospital-list">
    <div class="layout">
      <section class="header">
        <section class="search">
          <i class="iconfont">&#xe6f7;</i>
          <input type="search" placeholder="请输入医院简称或拼音头" class="search-text" v-model="hospitalName" />
        </section>
        <!-- <img src="../assets/image/filter.png" alt class="filter"/> -->
      </section>
      <section class="parent">
        <vue-scroll>
          <ul class="child">
            <li
              class="item"
              v-for="(item,index) of hospitalList"
              :key="index"
              :class="{active:active==index}"
              @click="MoToHospital(item,index)"
            >
              <section class="first">
                <div class="circle">{{index+1}}</div>
                <span class="hospital-name">{{item.name}}</span>
                <span class="distance">{{item.distance|ConvertDistance}}km</span>
              </section>
              <section class="second">
                <span class="level">{{item.hospLevel|ConvertLevel}}</span>
                <section class="degree">
                  <span class="degree-name">拥挤度</span>
                  <el-progress :percentage="item.degree" :color="item.color" class="progress"></el-progress>
                </section>
              </section>
            </li>
          </ul>
        </vue-scroll>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "HospitalList",
  data() {
    return {
      hospitalName: "",
      active: -1,
    };
  },
  computed: {
    hospitalList() {
      return this.$store.state.hospitalFilterList;
    },
    filterName() {
      return this.$store.state.filterName;
    },
  },
  filters: {
    ConvertLevel(val) {
      let res = "";
      switch (val) {
        case "Hospital-Level1":
          res = "一甲";
          break;
        case "Hospital-Level2":
          res = "二甲";
          break;
        case "Hospital-Level3":
          res = "三甲";
          break;
      }
      return res;
    },
    ConvertDistance(val) {
      return (val / 1000).toFixed(2);
    },
  },
  watch: {
    hospitalName(val) {
      this.$store.commit("FilterHospital", val);
    },
  },
  methods: {
    MoToHospital(item, index) {
      this.active = index;
      this.$store.commit("SaveCheckedHospital", {
        X: item.longitude,
        Y: item.latitude,
        id: item.id,
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hospital-list {
  color: #fff;
  height: 92%;
  background: url("../assets/image/listbg.png");
  background-size: 100% 100%;
}
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
}
.header {
  width: 100%;
  margin-top: 2%;
  display: flex;
  align-items: center;
}
.search {
  border: 1px solid rgba(0, 127, 153, 0.3);
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.search > .iconfont {
  color: #14ccc3;
  font-size: 24px;
}
::placeholder {
  color: #14ccc3;
  font-size: 18px;
}
.search-text {
  color: #fff;
  background: rgba(0, 0, 0, 0);
  border: none;
  padding: 5px 0;
  outline: none;
  flex-grow: 1;
  font-size: 18px;
}
.filter {
  height: 35px;
  width: 35px;
  border: 1px solid rgba(0, 127, 153, 0.3);
  margin-left: 10px;
  padding: 5px;
  cursor: pointer;
}
.parent {
  overflow: auto;
  flex-grow: 1;
  width: 100%;
}
.child {
  border-top: 1px solid rgba(0, 127, 153, 0.3);
}
.item {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 127, 153, 0.3);
  cursor: pointer;
}
.first {
  color: #fff;
  display: flex;
}
.circle {
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background: rgba(0, 102, 153, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
.hospital-name {
  flex-grow: 5;
  margin-left: 10px;
  font-size: 18px;
}
.distance {
  flex-grow: 1;
  text-align: right;
  font-size: 19px;
}
.second {
  display: flex;
  color: #14ccc3;
}
.level {
  margin-left: 34px;
  font-size: 18px;
}
.degree {
  display: flex;
  flex-grow: 1;
  margin-left: 50px;
  font-size: 18px;
}
.progress {
  flex-grow: 1;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.degree >>> .el-progress__text {
  color: #14ccc3;
  font-size: 12px;
  transform-origin: 0;
  transform: scale(0.8);
}
.active {
  background: rgba(82, 204, 204, 0.2);
}
</style>
